window.onload = function() {
	var x, y, xIncrement = 50, lineThreshold, // line canvas
		radius, outerRadius, numberOfArcs, deltaRadius = 20, increment, startAngle, endAngle; // arc canvas
	
	// Line Canvas
	lineCanvas = document.getElementById("lineCanvas");
	lineContext = lineCanvas.getContext("2d");
	
	x = 0;
	y = lineCanvas.height;
	
	lineContext.lineWidth = 1;
	lineContext.strokeStyle = "#ff0000";
	lineContext.fillStyle = "#00aa00";
	lineContext.lineJoin = "round";

	lineContext.beginPath();
	lineContext.moveTo(0, 0);
	
	lineThreshold = (lineCanvas.width / xIncrement);
	for(var line = 0; line < lineThreshold; line++) {
		x += xIncrement;
		if(line % 2 == 0) {
			y = lineCanvas.height;
		}
		else {
			y = 0;
		}
		lineContext.lineTo(x, y);
	}
    lineContext.stroke();
    lineContext.fill();
    
    // Arc Canvas
	arcCanvas = document.getElementById("arcCanvas");
	arcContext = arcCanvas.getContext("2d");

    arcContext.lineWidth = 10;
    arcContext.strokeStyle = "black";
    x = arcCanvas.width / 2;
    y = arcCanvas.height / 2;

    outerRadius = x > y ? y : x;
    outerRadius = x - deltaRadius;
    if(x > y) {
    	outerRadius = y - deltaRadius;
    }
    numberOfArcs = Math.floor(outerRadius / deltaRadius);
    for(var loop = 0; loop <= numberOfArcs; loop++) {
		radius = outerRadius - (deltaRadius * loop);
		increment = 0.2;
		startAngle = 0.0;
		endAngle = 0.1;
		for(var index = 0; index < 10; index++) {
			arcContext.beginPath();
			if(index > 0) {
				startAngle += increment;
				endAngle += increment;
			}
			arcContext.arc(x, y, radius, startAngle * Math.PI, endAngle * Math.PI);
			arcContext.stroke();
		}
	}
    
    // Curve Canvas - It is confusing
	curveCanvas = document.getElementById("curveCanvas");
	curveContext = curveCanvas.getContext("2d");
	
	curveContext.lineWidth = 10;
	curveContext.strokeStyle = "black";
	x = curveCanvas.width / 3;
    y = curveCanvas.height / 3;
    
    console.log(x, y);
    
	curveContext.beginPath();
	curveContext.moveTo(x, y);
	curveContext.quadraticCurveTo(x + 100, 150, x + 200, y);
	curveContext.stroke();
	
	// Circle Canvas
	circleCanvas = document.getElementById("circleCanvas");
	circleContext = circleCanvas.getContext("2d");
	
	circleContext.lineWidth = 10;
	x = Math.floor(circleCanvas.width / 2);
	y = Math.floor(circleCanvas.height / 2);
	radius = x > y ? y - 10 : x - 10;
	
	// Circle
	circleContext.beginPath();
	circleContext.fillStyle = "yellow";
	circleContext.arc(x, y, radius, 0, 2 * Math.PI, false);
	circleContext.fill();
	circleContext.stroke();
	
	// Semi-Circle
	circleContext.beginPath();
	circleContext.arc(x, y, (radius - deltaRadius * 3), (0.2 * Math.PI), (0.8 * Math.PI), false);
//	circleContext.moveTo(x - 50, y + 50);
//	circleContext.quadraticCurveTo(x, y + 150, x + 50, y + 50);
	circleContext.stroke();
	
	// Eyes
	circleContext.beginPath();
	circleContext.fillStyle = "black";
	circleContext.arc(x - 60, y - 40, 30, 0, 2 * Math.PI, false);
	circleContext.fill();
	circleContext.stroke();
	
	circleContext.beginPath();
	circleContext.fillStyle = "black";
	circleContext.arc(x + 60, y - 40, 30, 0, 2 * Math.PI, false);
	circleContext.fill();
	circleContext.stroke();
};
